
<template>
  <view class="page">
    <view>
      <view class="pay-title">
        <text>请输入6位支付密码</text>
      </view>
      <view class="pay-password" @click="onPayUp">
        <view class="list">
          <text v-show="passwordArr.length >= 1">●</text>
        </view>
        <view class="list">
          <text v-show="passwordArr.length >= 2">●</text>
        </view>
        <view class="list">
          <text v-show="passwordArr.length >= 3">●</text>
        </view>
        <view class="list">
          <text v-show="passwordArr.length >= 4">●</text>
        </view>
        <view class="list">
          <text v-show="passwordArr.length >= 5">●</text>
        </view>
        <view class="list">
          <text v-show="passwordArr.length >= 6">●</text>
        </view>
      </view>
      <!-- <view class="hint">
        <text>忘记支付密码？</text>
      </view> -->
    </view>
    <!-- ref:唯一ref  passwrdType：密码样式pay keyInfo：密码输入返回事件 -->
    <cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>

  </view>
</template>

<script>
const $api = require('@/utils/request.js').API
export default {
  components: {

  },
  data() {
    return {
      passwordArr: [],

    };
  },

  methods: {
    /**
     * 唤起键盘
     */
    onPayUp() {
      this.passwordArr = []
      this.$refs.CodeKeyboard.show();
    },
    //  支付键盘回调
    KeyInfo(val) {

      // 判断是否输入的是删除键
      if (val.keyCode === 8) {
        // 删除最后一位
        this.passwordArr.splice(val.index + 1, 1)
      }
      // 判断是否输入的是.
      else if (val.keyCode == 190) {
        // 输入.无效
      } else {

        this.passwordArr.push(val.key);
        if (this.passwordArr.length == 6) {
          let pay_password = ''
          this.passwordArr.forEach(item => {
            pay_password += item
          })
          this.$emit('payWordpass', pay_password)
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
$base: orangered; // 基础颜色

.page {
  // position: absolute;
  // left: 0;
  // top: 0;
  width: 100%;
  height: 100%;
  background-color: #FFFFFF;
}

.pay-title {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 200rpx;

  text {
    font-size: 28rpx;
    color: #555555;
  }
}

.pay-password {
  display: flex;
  align-items: center;
  width: 90%;
  height: 80rpx;
  margin: 20rpx auto;
  border: 2rpx solid $base;

  .list {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16.666%;
    height: 100%;
    border-right: 2rpx solid #EEEEEE;

    text {
      font-size: 32rpx;
    }
  }

  .list:nth-child(6) {
    border-right: none;
  }
}

.hint {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100rpx;

  text {
    font-size: 28rpx;
    color: $base;
  }
}
</style>